<template>
  <div>
    <div v-if="irc">
      <div :class="{lrc:true,show:isopen}">{{irc.lyric | deleteTime}}</div>
      <div class="open" @click="open" v-show="isopen">
        展开
        <span></span>
      </div>
      <div class="close" @click="close" v-show="!isopen">
        收起
        <span></span>
      </div>
    </div>
    <div v-else class="show">纯音乐，无歌词~</div>
  </div>
</template>

<script>
export default {
  props: {
    irc: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      isopen: true,
    }
  },
  filters: {
    deleteTime(val) {
      return val.replace(/\[.*?\]/g, '')
    }
  },
  methods: {
    // 控制歌词的展开和收起
    open() {
      this.isopen = false
    },
    close() {
      this.isopen = true
      document.documentElement.scrollTop = 0      //回到顶部
    }
  }
}
</script>

<style scoped>
/* 歌词 */
.lrc {
  white-space: pre-line;
  line-height: 30px;
  font-size: 13px;
  margin-bottom: 30px;
}

/* 歌词最小高度 */
.show {
  height: 240px;
  overflow: hidden;
}

/* 折叠按钮样式 */
.open,
.close {
  position: relative;
  color: #1c6dbd;
  font-size: 14px;
  cursor: pointer;
}

.open span,
.close span {
  position: absolute;
  display: inline-block;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-width: 5px;
  border-style: solid;
  border-color: #666 transparent transparent transparent;
  top: 5px;
  left: 30px;
}

.close span {
  top: -1px;
  border-color: transparent transparent #666 transparent;
}
</style>